<!--
 * @Author: Shiire
 * @Date: 2022-02-16 21:39:19
 * @LastEditors: Shiire
 * @LastEditTime: 2022-08-08 19:27:47
 * @Description: 
 * @FilePath: \grapro\src\pages\HomeM\index.vue
-->
<template>
  <div data-v-home123 id="home" class="home">
    <div class="left-nav">
      <LeftNav></LeftNav>
    </div>
    <div class="content">
      <div class="top-nav">
        <TopNav></TopNav>
      </div>
      <div class="content-body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import LeftNav from "@/components/LeftNav";
import TopNav from "@/components/TopNav";

export default {
  name: "HomeM",
  data: function () {
    return {
      uploadFile: [],
    };
  },

  components: {
    LeftNav,
    TopNav,
  },

  methods: {
    setActive(e) {
      const nodelist = document.getElementsByClassName("list");

      for (let i = 0; i < nodelist.length; i++) {
        nodelist[i].setAttribute("class", "list");
      }

      e.currentTarget.setAttribute("class", "list active");
    },
  },
};
</script>

<style lang="scss" scoped>
.home[data-v-home123] {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #fff;

  .left-nav {
    width: 14%;
    // min-width: 230px;
    height: 100%;
  }

  .content {
    width: 86%;
    height: 100%;
    background-color: #f4f5f7;

    .top-nav {
      width: 100%;
      height: 7%;
      // background-color: rgb(37, 35, 35);
      // background-image: linear-gradient(to top, #fff 0%, #383138 100%);
      background-color: #fff;
      border-bottom: 1px solid #eee;
      box-shadow: 2px 2px 6px rgb(0 0 0 / 8%);
    }

    .content-body {
      width: 100%;
      height: 93%;
      overflow: auto;
    }
  }
}
</style>